.line {
  content: '-';
  display: inline-block;
  width: 46px;
  color: transparent;
  border-bottom: 1px solid $gray-03;
  vertical-align: middle;
  height: 1px;
  margin-left: -20px;
  margin-right: -20px;
  margin-bottom: 3px;
}

.pipe-history {
  display: flex;
  height: 56px;
  width: 224px;
  .group-status {
    position: relative;
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: flex-end;
    margin-bottom: 11px;
    .content {
      width: 50px;
      max-width: 50px;
      white-space: nowrap;
      overflow: hidden;
      .title {
        color: #808080;
        font-size: 12px;
        white-space: nowrap;
        height: 16px;
        line-height: 16px;
        margin-bottom: 10px;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .point {
        display: block;
        width: 8px;
        height: 8px;
        border: 1px solid $background-section;
        border-radius: 100%;
        text-align: center;
        margin: 0 auto;
        color: #d8d8d8;
        background: #d8d8d8;
      }
    }
    &::after {
      @extend .line;
    }
    &:last-child {
      &::after {
        width: 0;
      }
      &.has-more {
        &::after {
          width: 20px;
          border-bottom-style: dotted;
        }
      }
    }
    &.active {
      .content .title {
        color: #383838;
      }
    }
    &-cancelling.active,
    &-running.active {
      .point {
        background: $primary-brand !important;
        border-color: $primary-brand !important;
      }
    }
    &-success.active {
      .point {
        background: $primary-success !important;
        border-color: $primary-success !important;
      }
    }
    &-canceled.active,
    &-fail.active {
      .point {
        background: $primary-danger !important;
        border-color: $primary-danger !important;
      }
    }
    &-waiting.active {
      .point {
        background: $primary-warning !important;
        border-color: $primary-warning !important;
      }
    }
    &-init {
      .point {
        margin: 0 auto !important;
        height: 8px !important;
        width: 8px !important;
        background: $background-section !important;
        border: 2px solid #d8d8d8 !important;
      }
    }
  }
}
